<script lang="js" setup>
import {ArrowDown,} from '@element-plus/icons-vue'
import { onMounted, ref, computed, defineEmits } from 'vue'

const storeStatus=ref('')
const storeStatuSvg=ref()



const setStoreStatus=(status)=>{
    if(status==1){
        storeStatus.value='营业中'
        storeStatuSvg.value=1
    }
    if(status==0){
        storeStatus.value='已打烊'
        storeStatuSvg.value=0
    }
}

onMounted(()=>{
    storeStatus.value='营业中'
    storeStatuSvg.value=1

})
</script>
<template>
        <el-dropdown>
          <div class="status">
            <label style="font-size: 18px;">
                <svg v-if="storeStatuSvg==1" t="1697300624166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="16" height="16"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#1afa29" p-id="7982"></path></svg> 
                <svg v-if="storeStatuSvg==0" t="1697300624166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="16" height="16"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#d81e06" p-id="7982"></path></svg>
                {{storeStatus}}
            </label>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="setStoreStatus(1)" ><svg t="1697300624166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="16" height="16"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#1afa29" p-id="7982"></path></svg>营业中</el-dropdown-item>
              <el-dropdown-item @click="setStoreStatus(0)"><svg t="1697300624166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7981" width="16" height="16"><path d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z" fill="#d81e06" p-id="7982"></path></svg>已打烊</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      
</template>

<style scoped>
.status{
  width: 100px;
  height: 20px;
  /* background: #000; */
}

</style>